<template>
  <div class="home">
    <div class="home_box">
      <div class="home_left">
        <leftList
          :data="HotDataShow"
          mainTitle="热门推荐"
          :clickSubTitle="clickHotSubTitle"
          :clickListOne="clickToDetail"
        />
      </div>
      <div class="home_right">
        <rightList 
          :data="HotDataRank"
          mainTitle="热门排名"
          :clickTitle="clickTodayTitle"
          :clickListOne="clickToDetail"/>
      </div>
    </div>
    <n-divider />
     <leftList
        :data="newData.slice(0,5)"
        mainTitle="最新上映"
        :clickSubTitle="clickHotSubTitle"
        :clickListOne="clickToDetail"
        :styleMain="{
          'grid-template-columns': 'repeat(auto-fill, minmax(17%, 1fr))',
        }"
      />
    <n-divider />
    <div class="home_box">
      <div class="home_left">
        <leftList
          :data="VIPDataShow"
          mainTitle="VIP专区"
          :clickSubTitle="clickHotSubTitle"
          :clickListOne="clickToDetail"
        />
      </div>
      <div class="home_right">
        <rightList 
          :data="VIPDataRank"
          mainTitle="VIP排名"
          :clickTitle="clickTodayTitle"
          :clickListOne="clickToDetail"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import {NDivider } from "naive-ui";
import leftList from "@/components/leftList.vue";
import rightList from "@/components/rightList.vue";
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { request } from "@/utils/request.js";
const router = useRouter();
const HotData = ref([]);
const HotDataShow = ref([]);
const HotDataRank = computed(()=>{
  if (HotData.value.length === 0) return [];
  return HotData.value.sort((a,b)=> b.average_score-a.average_score).slice(0,10)
});
const newData = ref([]);
const VIPData = ref([]);
const VIPDataShow = ref([]);
const VIPDataRank = computed(()=>{
  if (VIPData.value.length === 0) return [];
  return VIPData.value.sort((a,b)=> b.average_score-a.average_score).slice(0,10)
});
const getRandomData=(data,len)=>{
  const outer =[...data].sort(() => 0.5 - Math.random());
  return outer.slice(0,len)
}
onMounted(()=>{
  request({
    url:"/get_tag_videos/hot/",
    method:"GET",
  }).then(res=>{
    console.log("hot_video",res);
    HotData.value = res.data;
    HotDataShow.value =getRandomData(res.data,8);
  })
  request({
    url:"/get_tag_videos/new/",
    method:"GET",
  }).then(res=>{
    console.log("new_video",res);
    newData.value = res.data;
  })
  request({
    url:"/get_tag_videos/vip/",
    method:"GET",
  }).then(res=>{
    console.log("vip_video",res);
    VIPData.value = res.data;
    VIPDataShow.value =getRandomData(res.data,8);
  })
})
const clickHotSubTitle = () => {
  console.log("热门_查看全部>>父");
  router.push("/all");
};
const clickTodayTitle = () => {
  router.push("/all");
};
const clickToDetail = (e) => {
  console.log(e);
  router.push(`/detail/${e.id}`);
};
</script>
<style lang="scss" scoped>
@import "@/styles/base.scss";
.home {
  padding: 2rem $mainPadding;
  display: flex;
  flex-direction: column;
  &_box{
    display: flex;
  }
  &_left {
    flex: 3;
  }
  &_right {
    flex: 1;
    overflow: hidden;
    margin-left: 2rem;
  }
}
</style>
